<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps</title>
		<meta charset="UTF-8">
		<meta name="viewport" user-scalable="no"/>
		<style type="text/css">
			html, body, #map_canvas {
				background-image: url('images/loading_tile.png');
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript">
			var map;
			function initialize() {
				var latitude = 0;
				var longitude = 0;
				if (window.android) {
					latitude = window.android.getLatitude();
					longitude = window.android.getLongitude();
				}
			
				setupMap(latitude, longitude, 12);
				setCenter(latitude, longitude);
				setMark(latitude, longitude);
			}
			
			function setupMap(latitude, longitude, default_zoom) {
				var options = {
					zoom: default_zoom,
					center: getLatLng(latitude, longitude),
					disableDefaultUI: true,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				map = new google.maps.Map(document.getElementById('map_canvas'), options);
			}
			

			function getLatLng(latitude, longitude) {
				return new google.maps.LatLng(latitude, longitude);
			}

			function setCenter(latitude, longitude) {
				map.panTo(getLatLng(latitude, longitude));
			}
			
			function center() {
				var latitude = 0;
				var longitude = 0;
				if (window.android) {
					latitude = window.android.getLatitude();
					longitude = window.android.getLongitude();
				}				
				setCenter(latitude, longitude);
			}
			
			function setMark(latitude, longitude) {
				var latlng = getLatLng(latitude, longitude);
				var marker = new google.maps.Marker({
					position: latlng, 
					map: map
				});
			}

			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
	</head>
	<body>
		<div id="map_canvas"></div>
	</body>
</html>
